<template>
  <div class="big">
    <!-- 头部 -->
    <header>
      <!-- 大标题 -->
      <div class="head">
        <h1>妙手医生 ·</h1>
        <span class="title">妙手互联网医院</span>
        <span class="address" @click="$router.push('/city')">北京</span>
      </div>
      <!-- 搜索框 -->
      <van-sticky>
        <div class="search">

          <!-- <input type="text" class="search-inp" placeholder="搜索医生、医院、药品、疾病症状" @click="$router.push('/caseSearch')" /> -->

          <!-- <input type="text" class="search-inp" placeholder="搜索医生、医院、药品、疾病症状"  /> -->

          <input
            type="text"
            class="search-inp"
            placeholder="搜索医生、医院、药品、疾病症状"
            @click="$router.push('/caseSearch')"
          />
        </div>
      </van-sticky>
    </header>
    <!-- 轮播图1 -->
    <div class="swp1">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FBoMi-OG332E4Bj8dTcEFAHaDz?w=197&h=101&c=7&r=0&o=5&dpr=1.5&pid=1.7"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FBoMi-OG332E4Bj8dTcEFAHaDz?w=197&h=101&c=7&r=0&o=5&dpr=1.5&pid=1.7"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FBoMi-OG332E4Bj8dTcEFAHaDz?w=197&h=101&c=7&r=0&o=5&dpr=1.5&pid=1.7"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FBoMi-OG332E4Bj8dTcEFAHaDz?w=197&h=101&c=7&r=0&o=5&dpr=1.5&pid=1.7"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 身体 -->
    <main>
      <!-- 通知栏 -->
      <van-notice-bar
        left-icon="volume-o"
        text="公告：为了更好的服务您,即日起您点击医生的‘复诊开方’按钮产生的问诊费用均由平台承担！"
        class="notice"
      />
      <!-- 预约挂号 -->
      <div class="reservation">
        <div class="reservation-box">
          <img src="./预约挂号.png" alt="" @click="$router.push('/yuyue')" />
          <div>预约挂号</div>
          <span>30w+专家入驻</span>
        </div>
        <div class="reservation-box">
          <img src="./极速问诊.png" alt="" />
          <div>极速问诊</div>
          <span>平均3分钟接诊</span>
        </div>
        <div class="reservation-box">
          <img src="./复诊开方.png" alt="" @click="$router.push('/dizi')" />
          <div>复诊开方</div>
          <span>慢病续方送到家</span>
        </div>
      </div>
      <!-- 问专家 -->
      <div class="department">
        <div class="department-box">
          <img src="../../assets/tabbarImage/zj.png" alt="" />
          <div>问专家</div>
        </div>
        <div class="department-box">
          <img src="../../assets/tabbarImage/mz_03.png" alt="" />
          <div>开药门诊</div>
        </div>
        <div class="department-box">
          <img src="../../assets/tabbarImage/zb_03.png" alt="" />
          <div>义诊直播</div>
        </div>
        <div class="department-box">
          <img src="../../assets/tabbarImage/jk_03.png" alt="" />
          <div>健康科普</div>
        </div>
        <div class="department-box">
          <img src="../../assets/tabbarImage/my.png" alt="" />
          <div>商城买药</div>
        </div>
      </div>
    </main>
    <!-- 轮播图2 -->
    <div class="swp2">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="https://img1.baidu.com/it/u=335267061,3890667310&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=206"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://img1.baidu.com/it/u=335267061,3890667310&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=206"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://img1.baidu.com/it/u=335267061,3890667310&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=206"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://img1.baidu.com/it/u=335267061,3890667310&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=206"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 底部 -->
    <footer>
      <h2>我要问专家 <button class="more" @click="$router.push('/ask')">更多 ></button></h2>

      <!-- tab切换 -->
      <div class="content-tab">
        <van-tabs v-model:active="activeName" @change="hanldeChange">
          <van-tab v-for="(item, ind) in tabson" :key="ind" :title="item"></van-tab>
        </van-tabs>
        <div class="tab-qh">
          <div v-for="(item, ind) in list" :key="ind" class="mp">
            <div class="tabhome">
              <div class="mp1">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="mp2">{{ item.name }}</div>
              <div class="mp4">{{ item.position }}</div>
              <div class="mp3">
                {{ item.hospital }}<span>{{ item.class }}</span>
              </div>
              <div class="mp7">
                <div class="tw1"><span>图文咨询</span></div>
                <div class="dh1"><span class="dh">电话咨询</span></div>
                <div class="sp1"><span class="sp">视频咨询</span></div>
              </div>
              <div class="mp8">擅长：{{ item.strong }}</div>

              <div class="mp6">
                好评率<span>{{ item.praise }}%</span>|&puncsp;锦旗<span>{{ item.reply }}</span>|&puncsp;浏览人次<span>{{
                  item.fans }}</span>
                好评率<span>{{ item.praise }}%</span>|&puncsp;锦旗<span>{{ item.reply }}</span>|&puncsp;浏览人次<span>{{
                  item.fans }}</span>

                好评率<span>{{ item.praise }}%</span>|&puncsp;&puncsp;锦旗<span>{{
                  item.reply
                }}</span
                >|&puncsp;&puncsp;浏览人次<span>{{ item.fans }}</span>

              </div>
              <div class="mp5">￥{{ item.praise }}</div>
              <!-- 跳转问医生 -->
              <button @click="$router.push('/detail')">问医生</button>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <div>
      <div class="recommend_title">
        <h2>为你推荐</h2>
      </div>
      <div class="recommend_list">
        <listview></listview>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref, onMounted, onBeforeUnmount } from 'vue'
const list = ref<any[]>([])
const listTab = ref<any[]>([])
const activeName = ref<number>(0)
const pageCode = ref(1)
const pageSize = ref(3)
const activeTab = ref<any[]>([])
const tabson = ref(['妇产科', '儿科', '中医科', '皮肤科', '心内血管科', '口腔科'])
const hanldeChange = (index: number) => {
  console.log(index)
  const classIndex = tabson.value[index]
  console.log(classIndex)
  getList(classIndex)
}
const getList = (index: string) => {
  axios
    .get(`/api/doctorList?all=${index}`)
    .then((res) => {
      console.log(res)
      console.log(res.data.data)
      list.value = res.data.data.slice(
        (pageCode.value - 1) * pageSize.value,
        pageCode.value * pageSize.value
      )
      console.log(list.value)
    })
    .catch((err) => {
      console.log(err)
    })
}
const toChange = (index: any) => {
  console.log(tabson.value[index])
  const classsify = tabson.value[index]
  getList(classsify)
}
const tabClick = (title: any) => {
  console.log(title)
}

onMounted(() => {
  getList(tabson.value[0])
})

// 引导页
const isModalVisible = ref(false)
const countdown = ref(5) // 倒计时时间，单位：秒
let closeTimer: number | null | undefined = null

// 当组件挂载时，显示模态框并设置关闭定时器
onMounted(() => {
  isModalVisible.value = true

  // 设置定时器，在指定时间后关闭模态框
  closeTimer = setTimeout(() => {
    isModalVisible.value = false
  }, countdown.value * 1000) // 转换为毫秒

  // 可选：每秒更新倒计时（如果需要显示倒计时）
  const updateCountdown = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      clearInterval(updateCountdown)
    }
  }, 1000)
})
onBeforeUnmount(() => {
  if (closeTimer) {
    clearTimeout(closeTimer)
  }
})

function debounce(arg0: (event: any) => void, arg1: number): any {
  throw new Error('Function not implemented.')
}
// 页面防抖

// 为你推荐列表数据
// 为你推荐列表
import listview from '../../components/ListComponent/list.vue'
import { useRouter } from 'vue-router'
const loading = ref(false)
const finished = ref(false)
const route = useRouter()
const search = () => {
  route.push('/search')
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.big {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#1e6fff 5%, #f6f6f6 8%);
  overflow: hidden;

  header {
    .head {
      width: 94%;
      margin-left: 3%;
      height: 120px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      h1 {
        font-size: 60px;
        color: #fff;
      }

      .title {
        width: 48%;
        font-size: 40px;
        color: #fff;
        font-weight: bold;
      }

      .address {
        float: right;
        font-size: 40px;
        color: #fff;
      }
    }

    .search {
      width: 100%;
      height: 130px;
      padding-top: 10px;
      background-color: #1e6fff;

      .search-inp {
        width: 94%;
        margin-left: 3%;
        height: 80px;
        text-indent: 2em;
        background: rgba(255, 255, 255, 0.3);
        border: 0;
        border-radius: 10px;
        font-size: 26px;
        color: #fafbfc;
      }
    }
  }
  // .tabhome {
  //   width: 100%;

  // }
  .swp1 {
    width: 95%;
    height: 100%;
    margin-left: 3%;
    margin-top: 0.5rem;
    border-radius: 10px;

    .my-swipe {
      border-radius: 10px;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  main {
    margin-top: 20px;
    width: 94%;
    height: 530px;
    margin-left: 3%;
    border-radius: 20px;
    background-color: #fff;

    // 通知栏
    .notice {
      border-radius: 20px;
    }

    .reservation {
      width: 100%;
      height: 230px;
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .reservation-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 100px;
          height: 100px;
        }

        div {
          text-align: center;
          font-weight: bold;
          font-size: 30px;
          font-weight: normal;
        }

        span {
          font-size: 20px;
          color: #9e9ea0;
          font-weight: normal;
        }
      }
    }

    .department {
      margin-top: 50px;
      width: 100%;
      height: 130px;
      // background-color: red;
      display: flex;
      justify-content: space-around;

      .department-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 67px;
          height: 70px;
        }

        div {
          text-align: center;
          font-size: 20px;
          color: #333333;
        }
      }
    }
  }

  .swp2 {
    width: 94%;
    height: 100px;
    margin-left: 3%;
    margin-top: 20px;
    border-radius: 50px;

    img {
      width: 100%;
      height: 100px;
      border-radius: 50px;
    }
  }

  footer {
    width: 94%;
    // height: 30px;
    margin-left: 3%;
    margin-top: 20px;
    border-radius: 20px;
    // background-color: #fff;

    h2 {
      width: 100%;
      height: 90px;
      line-height: 90px;

      .more {
        display: inline-block;
        margin-left: 380px;
        background-color: #f4f4f4;
        font-size: 28px;
        width: 125px;
        color: #707070;
        height: 50px;
        line-height: 25px;
        font-weight: normal;
        border-radius: 15px;
        border: 0;
      }
    }

    .list {
      width: 100%;
      height: 50px;

      .listTop {
        width: 100%;
        height: 70px;
      }
    }
  }
}

.content-tab {
  width: 100%;
  height: 100%;
}

.tab-qh {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 25px;
}
.mp {
  width: 100%;
  height: 100%;
  margin-top: 50px;
  border-bottom: 1px solid #ccc;
}

.mp1 {
  width: 90px;
  height: 90px;
  background: red;
  border-radius: 50%;
  margin-top: 20px;
  margin-left: 10px;
}

.mp1 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mp2 {
  width: 100px;
  height: 20px;
  margin-left: 120px;
  margin-top: -70px;
  font-size: 30px;
  font-family: serif;
  font-weight: 600;
}

.mp3 {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  margin-left: 120px;
}

.mp3 span {
  margin-left: 20px;
  width: 120px;
  height: 30px;
}

.mp4 {
  margin-left: 210px;
  margin-top: -20px;
}

.mp5 {
  margin-top: 15px;
  margin-bottom: 25px;
  color: #e86d2c;
  width: 40px;
  height: 20px;
  margin-left: 110px;
}

.mp6 {
  width: 100%;
  height: 20px;
  font-size: 18px;
  margin-top: 10px;
  color: #666666;
  margin-left: 110px;
}

.mp6 span {
  color: #e86d2c;
  margin-left: 5px;
  margin-right: 5px;
}

.mp button {
  width: 140px;
  height: 50px;
  margin-top: -60px;
  float: right;
  background: #376df6;
  color: #f5f5f5;
  border: none;
  border-radius: 10px;
}

.mp7 {
  width: 100%;
  height: 20px;
  float: left;
  margin-left: 100px;
}

.mp8 {
  width: 600px;
  height: 60px;
  margin-top: 60px;
  font-size: 20px;
  word-wrap: break - word;
  overflow-wrap: break - word;
  color: #666666;
  margin-left: 110px;
}

.tw1 {
  width: 100px;
  height: 40px;
  padding-left: 7px;
  padding-top: 5px;
  font-size: 14px;
  background: #e8effd;
  color: #5787f6;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.tw1 span {
  font-size: 16px;
  line-height: 30px;
  margin-left: 10px;
}

.dh1 {
  width: 100px;
  height: 40px;
  padding-left: 7px;
  padding-top: 5px;
  font-size: 14px;
  background: #e8effd;
  color: #50b18a;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.dh1 span {
  font-size: 16px;
  line-height: 30px;
  margin-left: 10px;
}

.sp1 {
  width: 100px;
  height: 40px;
  padding-left: 7px;
  padding-top: 5px;
  font-size: 14px;
  background: #e8f6fc;
  color: #4fafe7;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.sp1 span {
  font-size: 16px;
  line-height: 30px;
  margin-left: 10px;
}

.modal {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
.recommend_title {
  width: 100%;
  height: 130px;
  line-height: 130px;
  margin-left: 30px;
}
.recommend_list{
  background-color: white;
}
</style>
